<template>
	<p></p>
	
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<div style="width: 100%;"><p style="text-align: center;">购物车管理</p></div>
			<div style="margin-left: auto;display: flex;">
				<el-select v-model="data.uid" placeholder="用户" style="width: 100px">
					<el-option v-for="item in data.cuss" :label="item.uname" :value="item.uid"/>
				</el-select>
				<el-button style="background-color:#E1337F;" size="default" type="danger" @click="search()" >
					<el-icon><Search /></el-icon>搜索
				</el-button>
			</div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		<el-card>
		<div style="width: 100%;">
		<el-table :data="data.cart" border style="width: 100%">
		<el-table-column label="购物编号" prop="cartid"></el-table-column>
		<el-table-column label="用户名称" prop="user.uname"></el-table-column>
		<el-table-column label="用户手机号" prop="user.phone"></el-table-column>
		<el-table-column label="商品编号" prop="commodity.comsn"></el-table-column>
		<el-table-column label="商品名称" prop="commodity.comname"></el-table-column>
		<el-table-column label="图片">
			<template #default="car">
				<el-image style="width: 100px;height: 100px;"
					:src="$ip+`/public/shows/`+car.row.commodity.pic" />
				</template>
		</el-table-column>
		<el-table-column label="商品价格" prop="commodity.price"></el-table-column>
		<el-table-column label="商品生产日期">
			<template #default="car">
				{{mytpost(car.row.commodity.tmake)}}
			</template>
		</el-table-column>
		<el-table-column label="商品制造商" prop="commodity.makers"></el-table-column>
		<el-table-column label="数量" prop="num"></el-table-column>
		<el-table-column label="总价格" prop="price"></el-table-column>
		<el-table-column label="创建日期">
			<template #default="car">
				{{mytpost(car.row.tcreate)}}
				</template>
		</el-table-column>
		<el-table-column label="操作">
			<template #default="car">
				<el-button style="background-color:#E1337F;" size="default" type="danger" @click.prevent="del(car.row.cartid)">
					<el-icon><EditPen /></el-icon>删除
				</el-button>
				</template>
		</el-table-column>
		
		
		</el-table>
		<div style="margin-left: 33%;">
						 <el-pagination  :total="data.page.count" :page-count="myCeil(data.page.count/data.page.l)"
						 layout="jumper , prev, pager ,next ,total" @current-change="pageQuery" /> 
					  </div>
		</div>
		</el-card>
		
		</div>
</template>


<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		
		const data=reactive({
			cart:[],
			page:{
				p:0,
				l:5,
				count:0
			},
			cuss:[],
			uid:""
		})
		
		function del(cartid){
			$get("/adm/cart/del/"+cartid+"/"+data.page.p+"/"+data.page.l).then((read)=>{
				success(read.data.msg)
				data.users=read.data.data.user
				data.page.count=read.data.data.count
				
			})
		}
		function search(){
			if(data.uid==""){
				errors("搜索不允许为空")
				return
			}
			$get("/adm/cart/findByUid/"+data.uid).then((read)=>{
				
				data.cart=read.data.data
				
			})
			
		}
		
		const mytpost = computed(() => {
			return function(tpost) {
				console.log(tpost)
				let t = new Date(tpost)
				let yy = t.getFullYear()
				let mm = t.getMonth() + 1
				let dd = t.getDate()
				let a = yy + "年" + mm + "月" + dd + "日"
				console.log(a)
				return a
			}
		})
		function pageQuery(val=1){
			// 翻页跳转
			
			let pagenum=data.page.l*val-data.page.l
			data.page.p=pagenum
			$get("/adm/findAll/2/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.users=read.data.data.user
				data.page.count=read.data.data.count
				
			})
			
			}
		const myCeil = computed(() => {
				return function(a) {
					var s= Math.ceil(a)
					return s
				}
			})
		onMounted(()=>{
			
			$get("/adm/cart/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				
				data.cart=read.data.data.cart
				data.page.count=read.data.data.count
				data.cuss=read.data.data.user
			})
			
			
		})
		
</script>

<style>
</style>
